import React, { useState } from 'react';
import { Input, Tabs, Space, Button } from 'antd';
import ProCard from '@ant-design/pro-card';
import List from './components/List.jsx';
import { request } from 'umi';
import { useEffect } from 'react';
import SearchBox from '@/components/Search/SearchBox';
import { nanoid } from 'nanoid';
import './index.module.css';

const { Search } = Input;

export default function Shenzhengxin() {
  const [tab, setTab] = useState('');
  const [dataSource, setDataSource] = useState([]);
  const [value, setValue] = useState('');
  const [defaultName, setDefaultName] = useState([{ name: '圆通速递' }, { name: '平安银行' }]);

  const searchAll = () => {
    request('/api/riskRating/getAllInfo', {
      method: 'GET',
    })
      .then((res) => {
        console.log(res);
        if (res.data && res.data.result_list) {
          setDataSource(res.data.result_list);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }


  const queryByRiskLevel = (value) => {


    request('/api/riskRating/queryByRiskLevel', {
      method: 'GET',
      params: {
        risk_level: value,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data && res.data.result_list) {
          setDataSource(res.data.result_list);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }

  useEffect(() => {
    searchAll();
  }, []);

  const array10 = Array.from({ length: 11 }, (_, index) => index);
  const tabItem = array10.map((ele) => {
    if (ele !== 0)
      return { label: ' ' + ele.toString() + ' ', key: ele.toString() };
  });

  const changeTab = (key) => {
    setTab(key);
    if (key === '0') {
      searchAll();
    } else {

      queryByRiskLevel(key);
    }


  };

  const handleSearch = (value) => {
    // const params = {
    //   tab: tab==='all'? '' : tab
    // }
    if (value == '') {
      setValue('请输入企业完整名称或股票简称');
      searchAll();
      return;
    }
    console.log('sasasa', value)
    //   const name = value.name;

    request('/api/riskRating/queryByEnterpriseName', {
      method: 'GET',
      params: {
        enterprise_name: value,
      },
    }).then((res) => {
      console.log(res);
      if (res.data && res.data.result_list) {
        setDataSource(res.data.result_list);
      }
    });
  };

  return (
    <ProCard direction="column" ghost>
      <ProCard
        gutter={8}
        style={{
          paddingBottom: '4em',
          marginBottom: '1em',
          borderRadius: '8px',
          height: '125px',
        }}
        layout="center"
        title={<b style={{ fontSize: '18px' }}>发债企业风险预警</b>}
        className="sz-card"
      >
        <Search
          enterButton="查询"
          onSearch={handleSearch}
          allowClear
          style={{ width: '30%', margin: '0 30px' }}
          placeholder={value ? value : '请输入企业完整名称或股票简称'}
        //   onChange={onChange}
        //value={value}
        />
        <Space style={{ color: '#999999', marginTop: '10px' }} >
          搜索建议:
          {defaultName?.map((defaultName) => (
            <Button
              key={nanoid()}
              onClick={() => {
                handleSearch(defaultName.name);
                setValue(defaultName.name);

              }}
              style={{ backgroundColor: '#F7F7F7', color: '#999999' }}
            >
              {defaultName.name}
            </Button>
          ))}
        </Space>
        {/* <SearchBox
          onSubmit={handleSearch}
          advices={[
            {
              name: '招商银行股份有限公司',
              eid: 'c97ca8d1-ae17-43e4-8bac-b4b22051484c',
              status: '存续（在营、开业、在册）',
            },
          ]}
          placeholder="请输入企业完整名称或股票简称"
        /> */}
      </ProCard>

      <ProCard >
        <b>风险等级</b>
        <Tabs
          items={[{ label: '全部', key: '0' }, ...tabItem]}
          centered={true}
          onChange={changeTab}
        />
        <List dataSource={dataSource} />
      </ProCard>
    </ProCard>
  );
}
